<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>教师管理 - 在线考试系统</title>
    <div th:replace="include/bootstrap :: bootstrap"></div>
    <style>
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .table-responsive {
            border: none;
            margin-bottom: 15px;
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .panel-heading {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
        
        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .panel-body {
            padding: 20px;
        }
        
        .btn-primary {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
        
        .btn-success {
            background-color: #2ecc71;
            border-color: #2ecc71;
        }
        
        .btn-success:hover {
            background-color: #27ae60;
            border-color: #27ae60;
        }
        
        .btn-danger {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }
        
        .pagination > .active > a {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .pagination > .active > a:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
    </style>
</head>
<body>
<div th:replace="include/AdminNav :: AdminNav"></div>

<div class="main-content">
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">教师管理</h3>
            </div>
            <div class="panel-body">
                <div class="row mb-3">
                    <div class="col-md-12">
                        <button class="btn btn-primary btn-sm" onclick="add()">
                            <i class="glyphicon glyphicon-plus"></i> 添加教师
                        </button>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                            <tr>
                                <th width="5%">编号</th>
                                <th width="15%">工号</th>
                                <th width="15%">密码</th>
                                <th width="15%">姓名</th>
                                <th width="15%">班级</th>
                                <th width="20%">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:if="${teachers.content.isEmpty()}">
                                <td colspan="6" class="text-center">暂无数据</td>
                            </tr>
                            <tr th:each="teacher : ${teachers.content}">
                                <td th:text="${teacher.userid}"></td>
                                <td th:text="${teacher.username}"></td>
                                <td th:text="${teacher.userpwd}"></td>
                                <td th:text="${teacher.truename}"></td>
                                <td>
                                    <span th:each="pjclass : ${classes}" th:if="${pjclass.classid == teacher.classid}" th:text="${pjclass.classname}"></span>
                                </td>
                                <td>
                                    <a th:onclick="'javascript:edit(\''+${teacher.userid}+'\');'" class="btn btn-success btn-xs">
                                        <i class="glyphicon glyphicon-pencil"></i> 修改
                                    </a>
                                    <a th:onclick="'javascript:trash(\''+${teacher.userid}+'\');'" class="btn btn-danger btn-xs" 
                                       data-toggle="modal" data-target="#trashModal">
                                        <i class="glyphicon glyphicon-trash"></i> 删除
                                    </a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页信息 -->
                <div class="row">
                    <div class="col-md-6">
                        当前 <span th:text="${teachers.number + 1}"></span> 页，
                        共 <span th:text="${teachers.totalPages}"></span> 页，
                        共 <span th:text="${teachers.totalElements}"></span> 条记录
                    </div>
                    <div class="col-md-6">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li th:class="${teachers.first ? 'disabled' : ''}">
                                    <a th:href="@{/AdminTeacherManage}">首页</a>
                                </li>
                                <li th:class="${teachers.hasPrevious() ? '' : 'disabled'}">
                                    <a th:href="@{/AdminTeacherManage(pageNum = ${teachers.hasPrevious() ? teachers.number : 1})}">上一页</a>
                                </li>
                                <li th:class="${teachers.hasNext() ? '' : 'disabled'}">
                                    <a th:href="@{/AdminTeacherManage(pageNum = ${teachers.hasNext() ? teachers.number + 2 : teachers.totalPages})}">下一页</a>
                                </li>
                                <li th:class="${teachers.last ? 'disabled' : ''}">
                                    <a th:href="@{/AdminTeacherManage(pageNum = ${teachers.totalPages})}">末页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="my" style="text-align:center">添加老师</h4>
            </div>
            <form class="form-horizontal" th:action="@{/addTeacher}" method="post">
                <div class="modal-body">
                    <input name="roleid" value="1" hidden="hidden"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">工号</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="username">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="userpwd" class="form-control" id="userpwd">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                    <label class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" name="truename" class="form-control" id="truename">
                        <span class="help-block"></span>
                    </div>
                </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属班级</label>
                        <div class="col-sm-5">
                            <select class="form-control" id="classid" name="classid">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="addbut">提交</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!-- Modal编辑模态框 -->
<div class="modal fade" id="editch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myedit">编辑教师信息</h4>
            </div>
            <form class="form-horizontal" th:action="@{/updateTeacher}" method="post">
                <div class="modal-body">
                    <input name="userid" id="edit_userid" hidden="hidden"/>
                    <input name="roleid" value="1" hidden="hidden"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">工号</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="username1">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="userpwd" class="form-control" id="userpwd1">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="truename" class="form-control" id="truename1">
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">所属班级</label>
                        <div class="col-sm-5">
                            <select class="form-control" id="classid1" name="classid">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="upaddbut">保存</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

<!--删除的模态框-->
<div class="modal fade" id="trashModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模糊框头部 -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
                </button>
                <h4 class="modal-title">删除确认</h4>
            </div>
            <!-- 模糊框主体 -->
            <div class="modal-body">
                <strong>你确定要删除吗？</strong>
                （将删除与该教师相关联的所有数据）
            </div>
            <!-- 模糊框底部 -->
            <div class="modal-footer">
                <button type="button" class="delSure btn btn-danger" data-dismiss="modal">确定删除</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    //删除
    function trash(userid) {
        if (!userid) {
            alert("错误：未获取到教师ID");
        } else {
            $(".delSure").click(function () {
                window.location.href="/deleteTeacher?userid="+userid;
            });
        }
    }
    
    // 编辑信息的方法
    function edit(userid) {
        if (!userid) {
            alert("错误：未获取到教师ID");
        } else {
            // 清空下拉框避免重复添加
            $("#classid1").empty();
            
            $.ajax({
                url: '/findUsersByUserid',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                    userid: userid
                }),
                success: function (data) {
                    // 先查询班级列表
                    $.ajax({
                        url: '/findAllClass',
                        type: 'POST',
                        dataType: 'json',
                        contentType: 'application/json;charset=UTF-8',
                        success: function (classData) {
                            $("#classid1").append("<option value=''>-- 请选择班级 --</option>");
                            for (var i = 0; i < classData.length; i++) {
                                $("#classid1").append("<option value='" + classData[i].classid + "'>" + classData[i].classname + "</option>");
                            }
                            $("#edit_userid").val(data.userid);
                            $("#username1").val(data.username);
                            $("#userpwd1").val(data.userpwd);
                            $("#truename1").val(data.truename);
                            $("#classid1").val(data.classid);
                            $("#editch").modal('show');
                        }
                    });
                },
                error: function () {
                    alert("获取教师数据失败");
                }
            });
        }
    }
    
    //添加
    function add() {
        // 清空下拉框避免重复添加
        $("#classid").empty();
        getpoint();
        $("#addch").modal({
            backdrop: "static"
        });
    }
    
    function getpoint() {
        $.ajax({
            url: '/findAllClass',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function (data) {
                $("#classid").append("<option value=''>-- 请选择班级 --</option>");
                for (var i = 0; i < data.length; i++) {
                    $("#classid").append("<option value='" + data[i].classid + "'>" + data[i].classname + "</option>");
                }
            }
        });
    }
</script>
</body>
</html>